<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="../lib/layui/css/layui.css">


    <link rel="stylesheet" href="./tags.css">



    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <button type="button" class="layui-btn layui-btn-danger  layui-btn-lg" id="laybelList-btn">链接列表</button>
            <button type="button" class="layui-btn layui-btn-primary  layui-btn-lg" id="addLaybel-btn">添加链接</button>
        </div>
        <div class="body" id="article-laybelList">
            <table class="layui-table">
                <colgroup>
                    <col width="100">
                    <col width="100">
                    <col>
                    <col width="300">
                </colgroup>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>ID</th>
                        <th>链接标题</th>
                        <th>链接描述</th>
                        <th>链接地址</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>


            <!-- 分页区域 -->
            <div id="pageBox"></div>


        </div>
        <div id="article-addLaybel" style="display: none;">
            <div class="layui-card">
                <!-- 卡片区域 -->
                <div class="layui-card-body">
                    <form class="layui-form" action="" id="add-form">
                        <div class="layui-form-item" id="layui-card-input">
                            <label class="layui-form-label">标签名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入标签名" autocomplete="off" class="layui-input" id="add-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit>立即创建</button>
                                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>



<!-- 表格数据的摸板 -->
<script type="text/html" id="tpl-table">
    {{each data}}
    <tr>
        <td>{{$index+1}}</td>
        <td>{{$value.id}}</td>
        <td>{{$value.title}}</td>
        <td>{{$value.des}}</td>
        <td>{{$value.url}}</td>
        <td>
            <!-- 修改标签按钮 -->
            <button type="button" class="layui-btn layui-bg-green" data-id="{{$value.id}}" data-tagname="{{$value.tagname}} " id="made-btn">
        <i class="layui-icon layui-icon-edit"></i>
      </button>
            <!-- 删除标签按钮 -->
            <button type="button" class="layui-btn layui-bg-red" data-id="{{$value.id}}" data-tagname="{{$value.tagname}}" id="del-btn">
        <i class="layui-icon layui-icon-delete"></i>
      </button>
        </td>
    </tr>
    {{/each}}
</script>


<!-- 修改标签标签 -->
<script type="text/html" id="dialog-add">
    <form class="layui-form" action="" id="form-add">


        <div class="layui-form-item">
            <label class="layui-form-label">链接标题</label>
            <div class="layui-input-block">
                <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标签名" autocomplete="off" class="layui-input" id="edit-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接描述</label>
            <div class="layui-input-block">
                <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标签名" autocomplete="off" class="layui-input" id="edit-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标签名" autocomplete="off" class="layui-input" id="edit-input">
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="layer-reset">取消</button>
            </div>
        </div>
    </form>
</script>

<script src="../lib/layui/layui.all.js" charset="utf-8"></script>
<!-- //  引入js文件 -->

<script src="../js/jquery.min.js"></script>

<!-- <script src="./js/baseApi.js"></script> -->
<script src="../lib/template-web.js"></script>

<script src="./tags.js"></script>




</html>